﻿$(function () {
    //
    connectSocketServer();
});

var noSupportMessage = "Your browser cannot support WebSocket!";
var ws;
var openChats = Array();

//$(document).keypress(function (e) {
//    if (e.ctrlKey && e.which == 13 || e.which == 10) {
//        $("#btnSend").click();
//        document.body.focus();
//    } else if (e.shiftKey && e.which == 13 || e.which == 10) {
//        $("#btnSend").click();
//        document.body.focus();
//    }
//})

function scrollToBottom(target) {
    target.animate({ scrollTop: target[0].scrollHeight });
}

function connectSocketServer() {
    //var messageBoard = $('#messageBoard');

    if (!("WebSocket" in window)) {
        alert(noSupportMessage);
        //messageBoard.append("* " + noSupportMessage + "<br/>");
        return;
    }

    console.log("* Connecting to server ..<br/>");

    // create a new websocket and connect
    ws = new WebSocket('ws://localhost:20110/sample');

    // when data is comming from the server, this metod is called
    ws.onmessage = function (evt) {
        var json = eval("(" + evt.data + ")");
        console.log(json.Name + " " + addSmileys(json.Message) + "<br />");
        var chatWnd = getChatWindow(json.Name);
        chatWnd.append(json.Name + ": " + addSmileys(json.Message) + "<br />");
        //scrollToBottom(messageBoard);
    };

    // when the connection is established, this method is called
    ws.onopen = function () {
        console.log('* Connection open<br/>');
    };

    // when the connection is closed, this method is called
    ws.onclose = function () {
        console.log('* Connection closed<br/>');
        connectSocketServer();
    }
}

function sendMessage(msg, to) {
    if (ws) {
        ws.send("Message=" + to + ":::" + msg);
    } else {
        alert(noSupportMessage);
    }
}

function getChatWindow(name) {
    if ($.inArray(name, openChats)==-1) {
        openChats.push(name, '');
        $('#tabs').tabs("add", "#chatWnd" + name, name);
        var chatWnd = $("#chatWnd" + name);
        
        var msgDiv = document.createElement("div");
        msgDiv.id = 'chatDiv' + name;
        msgDiv.style.height = '240px';
        chatWnd.append(msgDiv, "<br />");

        var inputDiv = document.createElement("div");
        inputDiv.id = 'chatInputDiv' + name;
        inputDiv.style.padding = '6px';
        inputDiv.style.background = "#CCCCCC";
        chatWnd.append(inputDiv, "<br />");


        var textBox = document.createElement("textarea");
        textBox.id = 'chatInput' + name;
        textBox.type = 'text';

        textBox.style.height = '44px';
        textBox.style.width = '370px';
        inputDiv.appendChild(textBox);

        var btn = document.createElement("button");
        btn.id = 'chatBtn' + name;
        btn.type = 'button';
        btn.setAttribute('style', 'position:absolute;margin-left:3px;height:50px;font-weight: bold;');
        btn.innerHTML = "Trimite";
        inputDiv.appendChild(btn);
        $('#chatBtn' + name).bind('click', function () {
            var name = $(this).attr('id').replace('chatBtn', '');
            var msg = $('#chatInput' + name).val();
            sendMessage(msg, name);
            $('#chatDiv' + name).append("<em>" + myChatName + " : " + addSmileys(msg) + "</em><br />");
            $('#chatInput' + name).val('');
            return false;
        });

        $('#tabs').tabs('select', "#chatWnd" + name);
    }
    return $("#chatDiv" + name);
}

function addSmileys(msg) {
    msg = msg.replace(/:\)\)/g, '<img src="/Styles/Smileys/21.gif" />');
    msg = msg.replace(/:\)/g, '<img src="/Styles/Smileys/1.gif" />');
    msg = msg.replace(/;\)/g, '<img src="/Styles/Smileys/3.gif" />');
    msg = msg.replace(/:\(/g, '<img src="/Styles/Smileys/2.gif" />');
    return msg;
}

